@import "../../_common_sass/base";
body{
    background-color: #fff;
}
.login{
    background-color: rgba(0,0,0,.5);
    @extend .full-screen;
    .phone-modal{
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: px2rem(550px);
        padding: px2rem(30px);
        background-color: #fff;
        border-radius: px2rem(10px);
        .title{
            position: relative;
            text-align: center;
            font-size: px2rem(36px);
            font-weight: 700;

            a{
                position: absolute;
                right: 0;
                font-size: px2rem(36px);
            }

        }
        .err{
            text-align: center;
            color: $red;
            margin-top: px2rem(20px);
        }
        .content{
            padding-top: px2rem(10px);
            .input-wrap{
                margin-bottom: px2rem(30px);
                border: 1px solid $base-border-color;
                border-radius: 4px;
                padding: px2rem(25px);
                background-color: #fff;
                input{
                    width: 100%;
                    height: px2rem(50px);
                    border: none;
                    font-size: px2rem(30px);
                }
            }
            .sms-wrap{
                margin-bottom: px2rem(30px);
                padding: px2rem(25px);
                background-color: #fff;
                font-size: px2rem(28px);
                span{
                    display: inline-block;
                    width: 50%;
                }
                .sms-code{
                    display: inline-block;
                    width:  50%;
                    line-height: px2rem(60px);
                    border-radius: 4px;
                    background-color: $blue;
                    font-size: px2rem(30px);
                    color: #fff;
                    &.disabled{
                        color: $text-color-9;
                        border-left:1px solid $light-border-color;
                        background-color: #ccc;
                    }
                }
            }
            .mock-input{
                display: flex;
                justify-content: space-between;
                input{
                    position: absolute;
                    width: px2rem(490px);
                    height: px2rem(100px);
                    background-color: #00d8ff;
                    opacity: 0;
                }
                em{
                    display: inline-block;
                    width: px2rem(100px);
                    height: px2rem(100px);
                    border-radius: px2rem(8px);
                    border: 1px solid $base-border-color;
                    line-height: px2rem(100px);
                    text-align: center;
                    font-size: px2rem(40px);
                }
            }
            .confirm-btn{
                @include button($height: px2rem(100px));
                width: 100%;
                font-size: px2rem(36px);
                &.disabled{
                    background-color: $gray-disabled;
                    border: 1px solid $base-border-color;
                    color: #fff;
                }
            }
        }
    }

}